class Settings {
    constructor(root) {
        this.root = root
        this.platform = "WEB"
        if(this.root.os) this.platform = "ACAPP"
        this.username = ''
        this.photo = ''
        this.$settings = $(`
<div class="game-settings">
    <div class="game-settings-login">
        <div class="game-settings-title">
            登录
        </div>
        <div class="game-settings-username">
            <div class="game-settings-item">
                <input type="text" placeholder="用户名"/>
            </div>
        </div>
        <div class="game-settings-password">
            <div class="game-settings-item">
                <input type="password" placeholder="密码"/>
            </div>
        </div>
        <div class="game-settings-submit">
            <div class="game-settings-item">
                <button>登录</button>
            </div>
        </div>
        <div class="game-settings-error-message">
        </div>
        <div class="game-settings-option">
            注册
        </div>
    </div>

    <div class="game-settings-register">
        <div class="game-settings-title">
            注册
        </div>
        <div class="game-settings-username">
            <div class="game-settings-item">
                <input type="text" placeholder="用户名"/>
            </div>
        </div>
        <div class="game-settings-password-first game-settings-password">
            <div class="game-settings-item">
                <input type="password" placeholder="密码"/>
            </div>
        </div>
        <div class="game-settings-password-second game-settings-password">
            <div class="game-settings-item">
                <input type="password" placeholder="再次输入密码"/>
            </div>
        </div>
        <div class="game-settings-submit">
            <div class="game-settings-item">
                 <button>登录</button>
            </div>
        </div>
        <div class="game-settings-error-message">
        </div>
        <div class="game-settings-option">
            登录
        </div>
    </div>
</div>
`)
        this.$login = this.$settings.find(".game-settings-login")
        this.$login_username = this.$login.find(".game-settings-username input")
        this.$login_password = this.$login.find(".game-settings-password input")
        this.$login_submit = this.$login.find(".game-settings-submit")
        this.$login_error_message = this.$login.find(".game-settings-error-message")
        this.$login_register = this.$login.find(".game-settings-option")

        this.$login.hide()
        
        this.$register = this.$settings.find(".game-settings-register")
        this.$register_username = this.$register.find(".game-settings-username input")
        this.$register_password = this.$register.find(".game-settings-password-first input")
        this.$register_password_confirmed = this.$register.find(".game-settings-password-second input")
        this.$register_submit = this.$register.find(".game-settings-submit")
        this.$register_error_message = this.$register.find(".game-settings-error-message")
        this.$register_login = this.$register.find(".game-settings-option")

        this.$register.hide()
        this.root.$game.append(this.$settings)
        this.start()
    }

    start() {
        this.getinfo()
        this.add_listening_events_login()
        this.add_listening_events_register()
    }

    add_listening_events_login() {
        let out = this
        this.$login_register.click(function() {
            out.register()
        })
        this.$login_submit.click(function() {
            out.login_on_remote()
        })
    }

    add_listening_events_register() {
        let out = this
        this.$register_login.click(function() {
            out.login()
        })
        this.$register_submit.click(function() {
            out.register_on_remote()
        })
    }

    register() {
        this.$login.hide()
        this.$register.show()
    }

    login_on_remote() {
        let username = this.$login_username.val()
        let password = this.$login_password.val()
       
        let out = this
        this.$login_error_message.empty()
        $.ajax({
            url: "https://app949.acapp.acwing.com.cn/settings/login/",
            type: "GET",
            data: {
                username: username,
                password: password,
            },
            success: function(resp) {
                if(resp.result === 'success') {
                    location.reload()
                } else {
                    out.$login_error_message.html(resp.result)
                }
            }
        })
    }

    register_on_remote() {
        let out = this
        let username = this.$register_username.val()
        let password = this.$register_password.val()
        let password_confirm = this.$register_password_confirmed.val()
        this.$register_error_message.empty()
        $.ajax({
            url: "https://app949.acapp.acwing.com.cn/settings/register/",
            type: "GET",
            data: {
                username: username,
                password: password,
                password_confirm: password_confirm,
            },
            success: function(resp) {
                if(resp.result === 'success') {
                    out.login()
                } else {
                    out.$register_error_message.html(resp.result)
                }
            }
        })
    }

    logout_on_remote() {
        if(this.platform === "ACAPP") return false

        $.ajax({
            url: "https://app949.acapp.acwing.com.cn/settings/logout/",
            type: "GET",
            success: function(resp) {
                if(resp.result === 'success') {
                    location.reload()
                }
            }
        })
    }

    login() {
        this.$register.hide()
        this.$login.show()
    }

    getinfo() {
        let out = this
        $.ajax({
            url: "https://app949.acapp.acwing.com.cn/settings/getinfo/",
            type: "GET",
            data: {
                platform: this.platform,
            },
            success(resp) {
                if(resp.result === "success") {
                    out.username = resp.username
                    out.photo = resp.photo
                    out.hide()
                    out.root.menu.show()
                } else {
                    out.login()
                }
            }
        })

    }

    hide() {
        this.$settings.hide()
    }

    show() {
        this.$settings.show()
    }
}
